<template>
  <div>
    <Form ref="formData" :model="formData" :label-width="140">
      <Card title="维护资质信息" :bordered="false" dis-hover class="ivu-mt  i-table-no-border">
        <Row class="card-title" justify="end" type="flex">
          <Col span="4" style="margin: 10px;">
            <Button type="primary" @click="saveBasicInfo" :loading="aloading">保存</Button>
          </Col>
        </Row>
        <Row class="format_table_wrap">
          <Table :columns="columns1" :data="baseTableData" width="100%" ref="table">
            <template slot-scope="{ row, index }" slot="action">
              <!-- <table-actions :requestApi="listData.requestApi" :basePath="basePath" :rowData="row" :indexData="index"
                  @actionsChange="getData"></table-actions> -->
              <Button @click="setSupply(row)">设置资质</Button>
            </template>
          </Table>
        </Row>
      </Card>
    </Form>
    <Modal v-model="modal1" title="关联资质" width="1000" @on-ok="relationOk" @on-cancel="relationOk">
      <Row type="flex">
        <Col span="8">资质名称：
          <Input v-model="qualificationName" placeholder="请输入内容" style="width: 200px"/>
        </Col>
        <Col span="8">供应商名称：
          <Input v-model="supplyName" placeholder="请输入内容" style="width: 200px"/>
        </Col>
        <Col span="8">
          <Button type="primary" @click="searchOrClear(1)">查询</Button>
          <Button style="margin-left: 8px;" @click="searchOrClear(0)">清空</Button>
        </Col>
      </Row>
      <Tabs v-model="switchTab" @on-click="Chang">
        <TabPane label="已关联" name="name1">
          <Table border :columns="columns12" :data="data6">
            <template slot-scope="{ row }" slot="qualificationCate">
              <span v-if="row.qualificationCate==1">检验报告</span>
              <span v-if="row.qualificationCate==2">材质单</span>
              <span v-if="row.qualificationCate==3">合格证</span>
              <span v-if="row.qualificationCate==4">3C认证</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="info" size="small" @click="cancelBtFun(row)">取消</Button>
            </template>
          </Table>
          <div class="ivu-mt ivu-text-center">
            <Page :total="totalNum1" show-total show-sizer :current.sync="nowPage1" @on-change="getRelByCondition"
                  @on-page-size-change="handleChangePage"/>
          </div>
        </TabPane>
        <TabPane label="未关联" name="name2">
          <Table border :columns="columns12" :data="data6">
            <template slot-scope="{ row }" slot="qualificationCate">
              <span v-if="row.qualificationCate==1">检验报告</span>
              <span v-if="row.qualificationCate==2">材质单</span>
              <span v-if="row.qualificationCate==3">合格证</span>
              <span v-if="row.qualificationCate==4">3C认证</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" @click="relationBtFun(row)">关联</Button>
            </template>
          </Table>
          <div class="ivu-mt ivu-text-center">
            <Page :total="totalNum1" show-total show-sizer :current.sync="nowPage1" @on-change="getNotRelByCondition"
                  @on-page-size-change="handleChangePage"/>
          </div>
        </TabPane>
      </Tabs>
    </Modal>
  </div>
</template>
<script>
import {ApiRequest} from '@api/basePage'

export default {
  mixins: [],
  components: {},
  data() {
    return {
      switchTab: 'name1',//tab切换
      totalNum: 0,
      pageShow: 10,
      nowPage: 1,
      aloading: false,
      productType: '02', // 商品类型：01-b2c实物商品;02-o2o实物商品;03-到店服务(预定)商品;04-到店服务（券）;05-上门服务商品;06-活动商品;
      isSelfShop: false,
      linkAttributeModel: false,
      linshiBaseTableData: [],//列表的数据源
      baseTableData: [],//列表的数据源
      state: [],
      name: '',
      isSave: false,
      ready: true,//用来标识是否准备好,准备好了,就可以提交
      isShowResults: false,
      searchData: [],
      productUuid: '',
      columns1: [
        {
          title: '分类',
          key: 'categoryPath',
          minWidth: 160
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
          minWidth: 160
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          minWidth: 160
        },
        {
          title: '商品名称',
          key: 'productName',
          align: 'center',
          minWidth: 160
        },
        {
          title: '品牌',
          key: 'brandName',
          align: 'center',
          minWidth: 160
        },
        {
          title: '规格',
          key: 'specDetailStr',
          align: 'center',
          minWidth: 160
        },
        {
          title: '资质类型',
          key: 'qualificationTypeName',
          align: 'center',
          minWidth: 160
        },
        {
          title: '是否已维护',
          key: 'isMaintainStr',
          align: 'center',
          minWidth: 120
        },
        {
          title: '是否必填',
          key: 'mustHaveStr',
          align: 'center',
          minWidth: 120
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          fixed: 'right',
          minWidth: 140
        }
      ],
      modal1: false,
      columns12: [{
        title: '资质名称',
        key: 'qualificationName',
      },
        {
          title: '供应商名称',
          key: 'supplyName',
        },
        {
          title: '资质类型',
          slot: 'qualificationCate',
        },
        {
          title: '描述',
          key: 'note',
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }],
      data6: [],
      qualificationName: '',
      supplyName: '',
      totalNum1: 0,
      nowPage1: 1,
      relUuid: '',
      mySubmitList: {},
      isShowSupply: false, // 是否显示供应商列表
      specUuid: '', // 选择供应商的规格的skuUuid
      isviewPageNew: false, // 是否是选择规格的查看选择供应商
      recordNo: '',//单据编号
      operName: '',//提交人
      opeTime: '',//提交时间
      operDeptName: '',//提交部门
      operAreaName: '',//区域
      qualificationCate: '',//资质类型,用于查询已关联/未关联列表
      formData: {},
      apiObj: {
        // 查询基本信息
        queryBasicInfo: {
          url: '/sysback/prepare/commit/qualification/queryQualification', // 接口地址
          type: 'post' // 接口请求类型
        },
        //保存
        saveBasicInfo: {
          url: '/sysback/prepare/commit/qualification/saveQualification', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 根据relUuid获取未关联的列表资质
        getNotRelByCondition: {
          //url: '/sysback/qualification/getNotRelByCondition', // 接口地址
          url: '/sysback/qualification/getAuditNotRelByCondition', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 根据relUuid获取已关联的列表资质
        getRelByCondition: {
          //url: '/sysback/qualification/getRelByCondition', // 接口地址
          url: '/sysback/qualification/getAuditRelByCondition', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 批量关联关系
        createRelate: {
          //url: '/sysback/qualificationskuqualificationrel/createRelate', // 接口地址
          url: '/sysback/qualificationskuqualificationrel/createAuditRelate', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 批量取消关联关系
        deleteRelate: {
          //url: '/sysback/qualificationskuqualificationrel/deleteRelate', // 接口地址
          url: '/sysback/qualificationskuqualificationrel/deleteAuditRelate', // 接口地址
          type: 'post' // 接口请求类型
        },
      }
    }
  },
  created() {
    this.productUuid = this.$route.query.productUuid;
    this.initData();
  },
  mounted() {
    // 刷新页面清除选择的供应商缓存
    window.localStorage.removeItem('selectSupplyList')
  },
  methods: {
    initData() {
      let data = {}
      let colums2 = [];
      // 开始请求列表
      ApiRequest(this.apiObj.queryBasicInfo.url + '?productUuid=' + this.productUuid,
        this.apiObj.queryBasicInfo.type, data, false).then(res => {
        if (res.retStatus === '1') {
          let reData = res.retData;
          this.baseTableData = res.retData.quaList;
        }
      })
    },
    //保存
    saveBasicInfo() {
      let productUuid = '';
      let notSpecList = [];
      this.mySubmitList = {};
      this.ready = true;
      if (!this.ready) {
        this.$Message.error('确保列表内容不能为空');
        return false;
      }
      this.mySubmitList.productUuid = this.productUuid;
      this.mySubmitList.notSpecList = notSpecList;
      this.aloading = true;
      ApiRequest(this.apiObj.saveBasicInfo.url,
        this.apiObj.saveBasicInfo.type, this.mySubmitList, false).then(res => {
        if (res.retStatus === '1') {
          this.$Message.success('保存成功');
          this.isSave = true;
        }
        this.aloading = false;
      }).catch((err) => {
        this.aloading = false;
      });
    },
    // 返回上一页，改变页面状态
    goBackPage() {
      this.isShowSupply = false;
    },
    //数据赋值处理
    onChageRow(index, index2, index3, attr, value) {
      if (attr.attrType === '04') {
        this.baseTableData[index].attrList[index2].allValueOptions[index3].selected = value;
      } else {
        this.baseTableData[index].attrList[index2].valueName = value;
      }
    },
    setSupply(row) {
      this.switchTab = 'name1'
      this.modal1 = true;
      this.relUuid = row.uuid;
      this.qualificationCate = row.qualificationTypeNo;
      this.getRelByCondition();
    },
    searchOrClear(type) {
      if (type == 0) {
        this.qualificationName = '';
        this.supplyName = '';
      }
      if (this.switchTab == 'name1') {
        this.getRelByCondition();
      } else {
        this.getNotRelByCondition();
      }
    },
    //获取已关联的列表
    getRelByCondition() {
      let searchParam = [];
      searchParam.push({name: 'qualificationName', value: this.qualificationName});
      searchParam.push({name: 'qualificationName_q', value: 'Like'});
      searchParam.push({name: 'supplyName', value: this.supplyName});
      searchParam.push({name: 'supplyName_q', value: 'Like'});
      searchParam.push({name: 'qualificationCate', value: this.qualificationCate});
      searchParam.push({name: 'qualificationCate_q', value: 'EQ'});

      let data = {
        nowPage: this.nowPage1,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };
      this.data6 = [];
      ApiRequest(this.apiObj.getRelByCondition.url + "?relUuid=" + this.relUuid,
        this.apiObj.getRelByCondition.type, data)
        .then(res => {
          if (res.retStatus == 1) {
            if (res.retData) {
              this.totalNum1 = res.retData.totalNum;
              this.loading = false;
              let data = res.retData.results;
              if (data.length > 0) {
                this.data6 = data
              }
            }
          } else {
            this.$Message.error('网络请求失败')
          }
        });
    },
    //获取未关联的列表
    getNotRelByCondition() {
      let searchParam = [];
      searchParam.push({name: 'qualificationName', value: this.qualificationName});
      searchParam.push({name: 'qualificationName_q', value: 'Like'});
      searchParam.push({name: 'supplyName', value: this.supplyName});
      searchParam.push({name: 'supplyName_q', value: 'Like'});
      searchParam.push({name: 'qualificationCate', value: this.qualificationCate});
      searchParam.push({name: 'qualificationCate_q', value: 'EQ'});

      let data = {
        nowPage: this.nowPage1,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };
      this.data6 = [];
      ApiRequest(this.apiObj.getNotRelByCondition.url + "?relUuid=" + this.relUuid,
        this.apiObj.getNotRelByCondition.type, data)
        .then(res => {
          if (res.retStatus == 1) {
            if (res.retData) {
              this.totalNum1 = res.retData.totalNum;
              this.loading = false;
              let data = res.retData.results;
              if (data.length > 0) {
                this.data6 = data
              }
            }
          } else {
            this.$Message.error('网络请求失败')
          }
        })
    },
    Chang(a) {
      this.switchTab = a
      if (a === 'name1') {
        this.getRelByCondition();
      } else {
        this.getNotRelByCondition();
      }
    },
    //关联
    relationBtFun(row) {
      let data = {
        qualificationUuids: row.uuid,
        relUuid: this.relUuid
      }
      ApiRequest(this.apiObj.createRelate.url,
        this.apiObj.createRelate.type, data, true).then(res => {
        if (res.retStatus === '1') {
          this.$Message.success('关联成功');
          this.getNotRelByCondition();
        }
      })
    },
    //取消关联
    cancelBtFun(row) {
      let data = {
        qualificationUuids: row.uuid,
        relUuid: this.relUuid
      }
      ApiRequest(this.apiObj.deleteRelate.url,
        this.apiObj.deleteRelate.type, data, true).then(res => {
        if (res.retStatus === '1') {
          this.$Message.success('取消成功');
          this.getRelByCondition();
        }
      })
    },
    //换页
    handleChangePage(val) {
      this.pageShow = val;
      this.$nextTick(() => {
        this.getData();
      });
    },
    //弹框确定
    relationOk() {
      this.switchTab = 'name1'
      this.initData();
    },
  }
}
</script>
<style lang="less" scoped>
.div {
  display: flex;

  > span:nth-of-type(2),
  > span:nth-of-type(3) {
    margin-left: 20px;
  }
}

.a {
  background: #5d8ae3 !important;

  > div {
    border-left: 40px solid #5d8ae3 !important;
  }
}

.search {
  width: 100%;
  padding: 10px 64px;
  background: #eaf7f9;
}
</style>
